<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示学生列表--Ajax(使用Jquery方式)</title>
    <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生列表(Jquery-Ajax)</h3>
            </div>
            <table class="table">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <tbody id="tb"></tbody>
            </table>
            <div class="panel-footer text-right">
                ffx
            </div>
        </div>
    </div>
</body>
</html>

<script>
    $(function(){       //相当于：window.onload
        //1. 查询所有学生
        findAllStudents();
    })
    //1. 查询所有学生
    function findAllStudents(){
        $.post("/student?cmd=list",function(data){
            console.log("data:",data);
            //1.1 定义存放学生信息的字符串
            let str = ""
            //1.2 为str赋值
            data.forEach(st=>{
                str += "<tr>";
                str += "<td>" + st.sid + "</td>"
                str += "<td>" + st.sname + "</td>"
                str += "<td>" + st.sex + "</td>"
                str += "<td>" + st.cid + "</td>"
                str += "<td>"
                str += "<a href='#' class='btn btn-success btn-sm'>修改</a> "
                str += "<a href='#' class='btn btn-danger btn-sm'>删除</a>"
                str += "</td>"
                str += "</tr>";
            })

            //1.3 为tb层添加内容
            $("#tb").html(str);
            //上面相当于： document.getElementById('tb').innerHTML = str;

        },"json");
    }
</script>